{% extends '../../common/layouts/accLayout.tpl' %}

{% block css_assets %}

    <style type="text/css">
        #form_bank_card .layui-form-label {
            width: 120px;
        }

        #form_bank_card .layui-input-block {
            margin-left: 150px;
        }

        .con-fund .card-b {
            margin-bottom: 50px;
        }
        .my-bank-card-list h4
        {
            width:200px;
        }
    </style>
{% endblock %}
{% set myselect =  setting.select.account %}
{% set identity_type =  setting.select.identity_type %}
{% block content %}
    <div class="ui-ucenter-right ui-box ">
        <div>
            <div class="breadcrumb">
                <ul>
                    <li>个人中心<i>&gt;</i></li>
                    <li><span>银行卡资料</span></li>
                </ul>
            </div>
            <div class="ui-body bg-white ">

                <div class="main_page_Info">
                    <div class="form">
                        <div class="form_input">

                            <div class="fund-box">
                                <div class="con-fund con-show clearfix my-bank-card-list">
                                    {% for card in datas.bankcards %}
                                        <div class="card-b rad4 brick my-bank-card" id="card_{{ card.id }}">
                                            <h1 class="clearfix rad1-2">
                                                {% if myselect.bank[card.bank_name] %}
                                                    <img src="{{ myselect.bank[card.bank_name].logo }}"/>
                                                {% else %}
                                                    <img src="{{ myselect.other_bank.logo }}"/>
                                                {% endif %}

                                                <span>
                                                <h4>{{ card.bank_name }}<i>储蓄卡</i></h4>
                                               <p><strong>银行卡号</strong>{{ card.card_no | hideIdentityNo }}</p>
                                             </span>
                                            </h1>
                                            <div class="tel-info-card clearfix">
                                            </div>
                                            <div class="info-c">
                                                <a href="javascript:void(0);" class="car-btn rad2 revise btn1"
                                                   onclick="javascript:showCardInfo('{{ card.id }}');">编辑</a>
                                                <a href="javascript:void(0);" class="car-btn rad2 del delete"
                                                   onclick="javascript:delWindowOpen('{{ card.id }}');">解绑</a>
                                            </div>
                                        </div>
                                    {% endfor %}


                                    <div class="card-c rad4 btn1 card-b" onclick="javascript:showCardInfo();"></div>


                                </div>
                            </div>

                        </div>
                    </div>
                </div>

            </div>

        </div>
    </div>


    <div id="cardInfo" style="display:none">
        {% include "./bankinfo_card.tpl" %}
    </div>

    <script type="text/javascript">

        var bank_logo = JSON.parse(jQuery.parseHTML("{{ banksInfo }}")[0].data);

        //显示银行卡信息
        function showCardInfo(id) {
            if (null == id || "" == id || undefined == id) {

                if (jQuery(".my-bank-card").length > 1) {
                    layer.msg("最多绑定两张银行卡", {
                        icon: 0
                    });
                    return;
                }

                var title = "添加银行卡";
                emptyDialogData();
                showCardBox(title);

            } else {
                $.when(findCardData(id)).done(function (data) {
                    var title = "修改银行卡";
                    showCardBox(title);

                });
            }
        }

        //
        function showCardBox(title) {

            layer.open({
                type: 1,
                title: title,
                area: ['560px', 'auto'], //宽高
                content: $("#cardInfo"),
                success: function () {

                    //initUpload()
                }
            });
        }

        //获取数据
        function findCardData(id) {

            var data = {"id": id};

            var defer = $.Deferred();
            jQuery.ajax({
                url: '/myAccount/bankcard/info',
                timeout: 2 * 60 * 1000,
                async: true,
                data: JSON.stringify(data),
                type: 'POST',
                dataType: 'JSON',
                contentType: "application/json; charset=\"utf-8\"",
                success: function (result, status) {
                    initDialogData(JSON.parse(result.datas));
                    defer.resolve(result);
                },
                error: function (result, status) {
                    defer.resolve();
                }
            });
            return defer.promise();
        }


        //删除银行卡
        function delWindowOpen(id) {
            if (jQuery(".my-bank-card").length < 2) {
                layer.msg("请至少保留一张银行卡", {
                    icon: 2
                });
                return;
            }

            layer.prompt({title: '解绑银行卡：请输入交易密码', formType: 1}, function(pass, index){
                layer.close(index);
                var data = {"id": id, "password":pass};
                jQuery.ajax({
                    url: '/myAccount/bankcard/delete',
                    timeout: 2 * 60 * 1000,
                    async: true,
                    data: JSON.stringify(data),
                    type: 'POST',
                    dataType: 'JSON',
                    contentType: "application/json; charset=\"utf-8\"",
                    success: function (result, status) {
                        if (result.status === 200) {
                            layer.msg("删除成功", {
                                icon: 1
                            });

                            jQuery("#card_" + id).remove();
                        }
                        else {
                            layer.msg(result.msg, {
                                icon: 0
                            });
                        }
                        return false;
                    },
                    error: function (result, status) {
                        layer.msg(result.msg, {
                            icon: 2
                        });
                    }
                });
            });

        }

        //编辑页面银行卡数据
        function modifyCardList(data) {
            var logo = "";
            if (bank_logo[data.bank_name]) {
                logo = bank_logo[data.bank_name].logo;
            }
            var innerHtml = "";
            innerHtml += "<h1 class=\"clearfix rad1-2\">";
            innerHtml += "<img src=\"" + logo + "\">";
            innerHtml += "<span><h4>" + data.bank_name + "<i>储蓄卡</i></h4>";
            innerHtml += "<p><strong>银行卡号</strong>" + hideIdentityNo(data.card_no) + "</p></span>";
            innerHtml += "</h1>";

            innerHtml += "<div class=\"tel-info-card clearfix\">";
            innerHtml += "</div>";


            innerHtml += "<div class=\"info-c\">";
            innerHtml += "<a href=\"javascript:void(0);\" class=\"car-btn rad2 revise btn1\" onclick=\"javascript:showCardInfo('" + data.id + "');\">编辑</a>";
            innerHtml += "<a href=\"javascript:void(0);\" class=\"car-btn rad2 del delete\" onclick=\"javascript:delWindowOpen('" + data.id + "');\">解绑</a>";
            innerHtml += "</div>";

            if (jQuery("#card_" + data.id).length > 0) {
                jQuery("#card_" + data.id).html(innerHtml);
            }
            else {
                var outerHtml = ("<div class=\"card-b rad4 brick my-bank-card\" id=\"card_" + data.id + "\">");
                outerHtml += innerHtml;
                outerHtml += "</div>";
                jQuery(".my-bank-card-list .card-c").before(outerHtml);
            }
        }
    </script>
{% endblock %}

{% block js_assets %}

{% endblock %}